<template>
 <div>
    <div id="newsContain" ref = "newsContain">
        <mt-loadmore  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" 
                        @bottom-status-change="handleBottomChange" :auto-fill="autoFill">
            <ul class="mui-table-view" id="newListUl">
                <router-link :to="{path:'/newsDetail',query:{id:item.id}}"  class="mui-table-view-cell mui-media" v-for="item in newList" :key="item.id">
                    <a href="javascript:;">
                        <img class="mui-media-object mui-pull-left newsImag" :src="item.img_url">
                        <div class="mui-media-body">
                            <h3>{{item.title}}</h3>
                            <p class='mui-ellipsis newsBottom'>
                                <span>发表时间：{{item.time | dateToYYYYMMDD}} </span>
                                <span>点击：0次</span>
                            </p>
                        </div>
                    </a>
                </router-link>
            </ul>
        </mt-loadmore>  
    </div>
  </div>  

</template>


<script>
import {Toast} from 'mint-ui';



export default {

    created() {
        this.getNewsDataNextPage()
    },
    mounted(){
        this.initLoradMoreHeight()
    },
    data(){
        return {
            newList:[],
            allLoaded:false,
            bottomPullText:"上拉加载更多",
            autoFill:false,
            newsConut:30,
            newsPage:0,
        }
    },
    methods:{
        loadBottom(data){
            Toast("加载数据")
            this.getNewsDataNextPage();
        },
        handleBottomChange(a,b){
            
        },

        initLoradMoreHeight(){
            var clientH=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            this.$refs.newsContain.style.height = (clientH-90)+'px';
            
        },
        getNewsDataNextPage(){
            let page = this.newsPage;
            let count = this.newsConut;
            let newPage = page+1;
            let start = page*count;
            let end = newPage*count;
            this.getNewsDataCore(start,end);
        },
        getNewsDataCore(start,end){
            let params = {
                start:start,
                end:end
            }
            let  option = {
                params:params
            }
            this.$http.get("news/get",option).then(res=>{
               if(!res.ok){
                   Toast("新闻数据请求失败");
                   return
               }
               let data = res.body.data;
               let result =  this.newList.concat(data)
               this.$refs.loadmore.onBottomLoaded();
               this.newList = result;
               this.newsPage = this.newsPage+1;
            });
        },


    },
    filters:{
        dateToYYYYMMDD:function(data){
           return data.split(" ")[0]
        }
    }
    
}





</script>

<style scoped>
   
   #newsContain{
       overflow-y: scroll;
   }

   .mui-media-body .newsBottom{
        display: flex;
        justify-content: space-between;
        font-size: 11px;
    }

    .mui-media-body h3{
        font-size: 13px;
        line-height: 17px;
        white-space: normal;
    }

    #context_in .newsImag{
        max-width: 60px;
        height: 55px;
    }

    ::-webkit-scrollbar { 
        display: none
     }




    

</style>
